import { Button, Space, Form, Input, Spin, message } from 'antd';
import { useRef, useState } from 'react';
import { cateAdd } from '../../server/cake';

const Catepub = () => {
  const form = useRef();
  const [isLoad, setIsLoad] = useState(false);
  const onFinish = async (values) => {
    setIsLoad(true);
    await cateAdd(values);
    setIsLoad(false);
    // 重置表单
    form.current.resetFields();
    // 成功弹框
    success();
  };
  // 提示框
  const success = () => {
    message.success('添加成功！');
  };
  return (
    <Spin tip="加载中..." size="large" spinning={isLoad}>
      <Form
        name="basic"
        ref={form}
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 14,
        }}
        style={{
          maxWidth: 950,
        }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item
          label="分类名称"
          name="catename"
          rules={[
            {
              required: true,
              message: '请输入名称',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Space size="middle">
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button
              type="primary"
              danger
              onClick={() => form.current.resetFields()}
            >
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Spin>
  );
};
export default Catepub;
